<template>
  <div class="app-detail-form">
    <p class="hot-form-title">院校和专业选择有盲点？专升本统考不知道如何复习？</p>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
      <el-form-item label="" prop="name">
        <el-input placeholder="请输入姓名" v-model="ruleForm.name">
            <template slot="prepend">姓名</template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="userMobile">
        <el-input placeholder="请输入电话" v-model="ruleForm.userMobile">
            <template slot="prepend">电话</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%;" type="danger" @click="submitForm('ruleForm')">立即咨询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    var validateuserMobile = (rule, value, callback) => {
      const isuserMobile = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
      const isMob = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;

      if(isMob.test(value)||isuserMobile.test(value)){
        callback();
      }else{
        callback(new Error('请输入正确的电话号或座机号'));
      }
    }
    return {
      //表单
      ruleForm: {
        name: '',
        userMobile:'',
        yuanxiao:'',
        zhuanye:''
      },
      //表单------验证规则
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
        ],
        userMobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: validateuserMobile, trigger: 'blur' }
        ],
      }
    }
  },
  props:{
    remark:{//表单提交 - 备注 参数 ： 通过父级获取页面title 传递过来
      type:String,
      default:'右侧小窗口'
    }
  },
  mounted() {

  },
  methods:{
    submitForm(formName) {//表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.insertQuasiUserCollection()
          // this.tencentVerificationCode()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async insertQuasiUserCollection(){//报名
      let data = {
        source:window.location.href,
        remark:this.remark
      }
      data = Object.assign({},data,this.ruleForm)
      // console.log(data)
      let result = await this.$api.user.insertQuasiUserCollection(data)
      if(result.code === window.g.SUCCESS){
        this.$message({
          message: result.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: result.msg,
          type: 'error'
        });
      }
    },
  }
}
</script>

<style scoped="scoped" lang="scss">
.app-detail-form{
  background-color: white;
  width: 288px;
  box-sizing: border-box;
  padding: 10px;
  .hot-form-title{
    font-size: 18px;
    color: #f5243e;
    padding-bottom: 10px;

  }
}
</style>
